<template>
  <div>
    <div class="content_box" :class="{ scoll: header.scoll, scoll1: !header.scoll }">
      <div class="logo" @click="jump('/')">
        <img style="height: 50px;width: 50px;" src="@/assets/img/logo2.png" />
        <a-divider type="vertical" />
        <div>{{ SYSYTM_TITLE }}</div>
      </div>

      <div class="content_box_center">
        <div v-for="(v, i) in menu" :key="i">
          <div class="content_box_div" :class="{ active: getk1(v.key) }" @click="jump(v.path)">
            <a :href="v.path" class="a">{{ v.name }}</a>
            <div class="icon" v-if="v.children">
              <DownOutlined />
            </div>
          </div>
          <ul class="content_box_ul" v-if="v.children && v.children[0]">
            <li :class="{ active: getk2(v.key, v1.key) }" v-for="(v1, i1) in v.children" :key="i1"
              @click="jump(v.path + v1.path)">
              <a :href="v.path + v1.path" class="a">{{ v1.name }}</a>
            </li>
          </ul>
        </div>
      </div>
      <client-only>
        <div class="login" v-if="user.token">
          <!-- <a-avatar style="background-color: #87d068">
            <template #icon>
              <UserOutlined />
            </template>
</a-avatar> -->
          <a-avatar src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" />
          <a-divider type="vertical" />
          <div class="font-size-14">
            <a-dropdown>
              <a class="ant-dropdown-link login-text" @click.prevent style="margin-left: 10px;">
                {{ user.userInfo?.name }}
              </a>

              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <a href="javascript:;" @click="jump('/user')">个人中心</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="jump('/awardManagement')">奖状管理</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="lougout">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <a-tag :color="user.userInfo?.isTeacher === 0 ? 'green' : 'blue'" class="ml-10 custom-tag"
            style="padding: 3px 7px; border-radius: 12px;">
            {{
              user.userInfo?.isTeacher === 0 ? "学生" : "教师"
            }}
          </a-tag>
        </div>
      </client-only>
      <client-only>
        <div class="login" v-if="!user.token">
          <div class="login-text" @click="jump('/login')">登录</div>
          <a-divider type="vertical" />
          <div class="login-text" @click="jump('/login')">注册</div>
        </div>
      </client-only>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import {
  CaretDownOutlined,
  DownOutlined,
  UserOutlined,
} from "@ant-design/icons-vue";
import { useHeaderStore } from "@/store/header";
import { useRoute } from "vue-router";
import { menuRouter } from "@/router";
import { useUserStore } from "@/store/user";
import { SYSYTM_TITLE } from "@/config";
import { message } from "ant-design-vue";
const header = useHeaderStore();
const user = useUserStore();


const menu = ref(menuRouter);
const getk1 = (key) => {
  const route = useRoute();
  let n = route.name.split("-")[0];
  // 首页的链接在vue路由中默认会返回index，所以这里处理一下转换home
  return key === (n === "index" ? "home" : n);
};
const getk2 = (k1, k2) => {
  const route = useRoute();
  // 首页的下级菜单，直接二级菜单是否相等即可
  if (k1 === "home") {
    return route.name === k2;
  }
  return route.name.split("-")[0] === k1 && k2 === route.name;
};
const jump = (path) => {
  event.preventDefault(); // 阻止默认跳转行为
  let router = useRouter();
  router.push(path);
};
const lougout = () => {
  user.logout();
};
onMounted(() => {

})
</script>

<style lang="less" scoped>
@import "@/assets/css/main.less";

* {
  margin: auto 0;
  padding: 0;
}

.a {
  text-decoration: none;
  color: @container-header-text-color;
}

.scoll {
  opacity: 0;
  transform: translateY(-50px);
  transition: all 0.5s ease-in-out;
}

.scoll1 {
  opacity: 1;
  transition: all 0.5s ease-in-out;
}

.content_box {
  width: 100%;
  height: @container-header-margin-top;
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
  // background: linear-gradient(135deg, #c850c0, #4158d0);
  // background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
  // background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  // background: linear-gradient(135deg, #f6d365, #fda085);
  // background: linear-gradient(135deg, #a8e063, #56ab2f);
  background: @container-header-color;
  position: fixed;
  top: 0;
  font-size: @container-header-text-font-size;
}

.content_box_center {
  display: flex;
  justify-content: space-around;
  align-content: center;
  align-items: center;
}

.logo {
  display: flex;
  color: @container-header-text-color;
  font-weight: bold;
  cursor: pointer;
}

.logo img {
  width: 30px;
  height: 30px;
}

.login-text:hover {
  color: @container-header-active-color;
}

.content_box_center>div {
  margin: @container-header-margin @container-header-margin;
}

.content_box_div {
  // font-family: "华文隶书";

  padding: 5px;
  color: @container-header-text-color;
  font-weight: bold;
  cursor: pointer;
  display: flex;
}

.icon {
  margin-left: 5px;
  transition: all 0.2s ease-in-out;
}

.content_box_div:hover a {
  color: @container-header-active-color;
}

.content_box_div:hover {
  color: @container-header-active-color;
}

.content_box_div:hover .icon {
  transform: rotate(180deg);
  transition: all 0.2s ease-in-out;
}

.active a {
  color: @container-header-active-color;
}

.active {
  color: @container-header-active-color;
}

.active .icon {
  transition: all 0.2s ease-in-out;
}

.content_box_ul {
  border: 1px solid rgb(228, 222, 222);
  border-radius: 10px;
  list-style: none;
  padding: 10px 20px 10px 20px;
  position: absolute;
  top: -10;
  width: 250px;
  display: none;
  transition: all 0.2s ease-in-out;
  background: @container-header-color;
}

.content_box_div:hover+.content_box_ul {
  display: block;
}

.content_box_ul:hover {
  display: block;
}

.content_box_ul li {
  padding: 10px 0;
  text-align: left;
  color: @container-header-text-color;
}

.content_box_ul li:hover a {
  color: @container-header-active-color;
}

.login {
  display: flex;
  color: @container-header-text-color;
  font-weight: bold;
  cursor: pointer;
  align-items: center;
}
</style>